<template>
<view class="gradient-background">
	<view class="secondbody">
		<view class="header">
			<view style="width:100%; height:100px; border: 0px solid red; display: flex; justify-content: center; align-items: center;">
			</view>
			
			<view style="width:100%; height:100px; border: 0px solid red; display: flex; justify-content: center; align-items: center;">
			<view style="width:20%; height:100px; border: 0px solid red; display: flex; justify-content: center; align-items: center;">
			<TnButton  open-type="chooseAvatar" @chooseavatar="tChooseAvatar"  
			 bg-color="rgba(255, 255, 255, 0)"  text-color="tn-white"  shape="cicle"
			 size="lg" font-size="10">
			 <TnAvatar :url="headimg" size="lg"  @click="avatarClick"  />
			 </TnButton>
			</view>
			
			<view style="width:75%; height:100px; border: 0px solid red;">
				<view
					style="width:100%; height:60%; border: 0px solid red; display: flex; justify-content: left; align-items: flex-end;">
			
					<input type="nickname" id="tnickname"  @blur="handleInput"
					v-model="username"  placeholder="请点击获取或输入昵称"/>
				</view>
			</view>
			</view>
		</view>
		
		<view class="curcount">
			<view class="curText"  style=" color:white;">
				当前可用次数
			</view>
		
			<view class="curText">
				<view style="width:50%; font-size:30px; color:white; border: 0px solid red;">
					<b> {{ countnum }} </b>
				</view>
			<view style="width:50%; border: 0px solid red; display: flex; justify-content: flex-end; align-items: center; padding-right: 20px;">
		
					<TnButton bg-color="#5F59F7" text-color="tn-white" width="84px" height="38px" font-size="30" @click="handleClick">
						增加次数</TnButton>
				</view>
			</view>
		
		
		</view>
		
		<view class="shouyi"  v-show="userproxy">
			<view class="shouyiText">
				<view style="width:50%;">
					<b>我的收益</b>
				</view>
		
				<view  
					style="width:50%; font-size:10px; display: flex; justify-content: flex-end; align-items: center; padding-right: 20px; ">
					<b  @click="detailContent" > 查看怎么挣钱> </b>
				</view>
			</view>
		
			<view class="shouyiText" style="color:#FFC540"  >
				<span style="margin-top: 20px;"> ¥ </span> &nbsp; <b style="font-size:40px;"> {{income}} </b>
			</view>
		
			<view class="shouyiText">
				<view style="width:100%; height:60px; border: 0px solid red; font-size:10px; margin-top: 20px; background-color: #EEF2FF;  display:flex; justify-content:center; align-items: center; ">
				
				<view style="width:50%; border: 0px solid red; font-size:10px; margin-top: 0px; ">
					目前推广人数：0
				</view>
		
				<view
					style="width:50%; border: 0px solid red; display: flex; justify-content: flex-end; align-items: center; padding-right: 20px; ">
		
					<TnButton  open-type="share" @click="wxshare"   bg-color="#5F59F7" text-color="tn-white"  width="84px" height="38px" font-size="30">
						分享赚钱</TnButton>
				</view>
				</view>
			</view>
		</view>

		<view class="otherinfo" style="width:100%; height:100px;">
			<view>
				<b> 意见反馈 </b>
			</view>
			<view>
				客服电话：010-58621160
			</view>
			<view>
				反馈邮箱：feedback@duxinai.com
			</view>
		</view>

		<view class="footerinfo"   >
			<view style="width:24%; text-align: right; font-size: 12px;">
				<b @click="privateClick" >《隐私政策》</b>
			</view>
			<view style="width:38%; text-align: center; font-size: 12px;">
				《个人信息手机清单》
			</view>
			<view style="width:38%; text-align: left; font-size: 12px;">
				《第三方合作清单》
			</view>
		</view>

		
		
		<view style="height:0px;">
			<TnPopup v-model="showPopup" :overlay-closeable="false" width="80%" height="700" close-btn>
			    <view class="tn-p-lg">  
				分享赚钱，轻松收益！ <br/>
				通过我们的平台，您可以将乐趣分享给朋友，还能轻松赚取丰厚奖励！轻松三步，躺赚收益：<br/>
				1、成为渠道用户：在平台认证为渠道用户后，即可激活分享赚钱功能。<br/>
				2、分享专属链接：点击小程序右上角三个点，轻松分享给朋友或朋友圈，或复制链接后在社交平台发布。<br/>
				3、好友充值，您赚收益：当好友通过您的链接首次注册并完成充值，您将立即获得 50% 的现金奖励！收益无上限！<br/>
				立即分享，赚取专属于您的收益吧！活动截止到2025年10月1日。<br/>
				*本活动最终解释权归北京图灵星辰机器人有限公司所有<br/>
				
				</view>
			    <template #closeBtn>
			      <TnIcon name="close-circle" />
			    </template>
			  </TnPopup>
		</view>

	</view>	
</view>	
<Chongzhi @callParentMethod="parentMethod" ref="czcom" />
</template>

<script lang="ts" setup>
	import { ref, reactive, getCurrentInstance } from 'vue';
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	import TnAvatarGroup from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar-group.vue'
	import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
	import TnPopup  from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import Chongzhi from './Chongzhi.vue'
	import { userInfo, reFlushToken, updateNickname, updateHeadimg } from '@/api/login'
	 
	const privateClick = () => {
		uni.navigateTo({
		  url: "/pages/index/privacypolicy/privacypolicy"
		});
	}
	
	
	const wxshare = () => {
		console.log("sssssssssssssssssssssssss")
		/*
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 1,
			summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
			success: function (res) {
				console.log("success:" + JSON.stringify(res));
			},
			fail: function (err) {
				console.log("fail:" + JSON.stringify(err));
			}
		});*/
		
		uni.share({
		    provider: 'weixin',
		    scene: "WXSceneSession",
		    type: 5,
		    //imageUrl: 'https://duxinai.com/images/nindex.png',
			imageUrl: 'https://duxinai.com/images/tx4.jpg',
		    title: '欢迎体验读心AI',
		    miniProgram: {
		        id: 'wx6ed1af0b9fdd0456',
		        path: 'pages/index/index',
		        type: 2,
		        webUrl: "https://ask.dcloud.net.cn/article/287",//地址
		    },
		    success: function (res) {
		    	console.log("success:" + JSON.stringify(res));
		    },
		    fail: function (err) {
		    	console.log("fail:" + JSON.stringify(err));
		    }
		});
		console.log("sssssssssssssssssssssssss")
		
	}
	
	
	const username = ref("微信用户");
	const countnum = ref(0);
	const income = ref(0);
	const headimg = ref("/static/head.png");
	const refcode  = ref("");
	const userproxy = ref(true);
	const showPopup = ref(false)
	
	const init = () => {
		userInfo().then(res => {
			console.log("--------ssssssssssssssssssssss------")
			console.log(res)
			console.log(res.data.countnum )
			countnum.value = res.data.countnum
			username.value = res.data.username
			headimg.value  = res.data.avatar
			refcode.value  = res.data.refcode
			income.value   = res.data.income
			if(res.data.isproxy==1){
				userproxy.value = true
			}
		}).catch(error => {
			console.error("===========================error===========================" )
			console.error( error)
		})
	}
	init()
	
	const tChooseAvatar = (e) => {
		console.log("=================tChooseAvatar=================");
		console.log(e)
		let base64String = ""
		let index = e.detail.avatarUrl.indexOf("wxfile://");
		console.log("index=====================: " + index)
		if(index>=0){
			base64String = wx.getFileSystemManager().readFileSync(e.detail.avatarUrl, 'base64');
			headimg.value = `data:image/jpeg;base64,${base64String}`;
			uploadHeadImages()
		}else{
			uni.request({
			          url: e.detail.avatarUrl,
			          responseType: 'arraybuffer' // 设置响应类型为 ArrayBuffer
			}).then(res => {
						console.log("===============request===================");
						console.log( res )
						if (res.statusCode === 200) {
						          const arrayBuffer = res.data;
						          base64String = wx.arrayBufferToBase64(arrayBuffer);
						          headimg.value = `data:image/jpeg;base64,${base64String}`;
						          console.log('图片已下载为Base64:', headimg.value );
								  uploadHeadImages()
						} else {
						          console.error('请求失败，状态码:', res.statusCode);
						}
			})
		}
	}
	
	const uploadHeadImages = () => {
		const data = {
			headerImage: headimg.value
		}
		updateHeadimg(data).then(res => {
			console.log("--------tChooseAvatar-----")
			console.log(res)
			uni.showToast({
				icon:  'none',
				title: res.data,
				duration: 2000 // 持续时间为3000毫秒，即3秒
			})
		}).catch(error => {
			console.error("===============tChooseAvatar============" )
			console.error( error)
		})
	}
	
	const curInst = getCurrentInstance();
	const handleInput = () => {
		console.log("==============funcnickname===================");
		console.log(username.value)
		uni.createSelectorQuery().in(curInst)
		.select("#tnickname").fields({
		        properties: ["value"],
		}).exec((res) => {  
		        const nickName = res?.[0]?.value  
				console.log('获取昵称', nickName)
				username.value = nickName
				
				const data = {
					nickName: username.value
				}
				//updateNickname, updateHeadimg
				updateNickname(data).then(res => {
					console.log("--------handleInput-----")
					console.log(res)
					uni.showToast({
					  icon:  'none',
					  title: res.data,
						duration: 2000 // 持续时间为3000毫秒，即3秒
					})
					//username.value = data.nickName+":" + res.data
				}).catch(error => {
					console.error("===============handleInput============" )
					console.error( error)
				})
				
		})
	}
	
	const czcom = ref(null);
	const handleClick = () => {
		if (czcom.value) {
			czcom.value.childMethod();
		}
	}

	const detailContent = () => {
		showPopup.value = true
	}
	
	const parentMethod = () => {
		//刷新token
		reFlushToken()
		userInfo().then(res => {
			console.log("parentMethod-------------userInfo: ")
			console.log( res.data) 
			countnum.value = res.data.countnum
			username.value = res.data.username
			refcode.value  = res.data.refcode
		})
	}
	
	
	
	
	
	
	
	
	
 

</script>


<style>
	.secondbody {
		margin: 0px 10px;
	}

	.gradient-background {
	  background-image: linear-gradient(to bottom, #B8D4FD, #EAEEF5);
	  height: 100%; /* 确保背景覆盖整个页面 */
	  width:  100%;
	}

	.header {
		border: 0px solid red;
		height: 200px;
		width:  100%;
	}

	.curcount {
		margin-top: 0px;
		height: 110px;
		background-color: #96B1F8;
		border-radius: 20rpx;
		border: 0px solid red;
	}

	.curText {
		display: flex;
		justify-content: left;
		align-items: center;
		padding-left: 20px;
		height: 40%;
		/* 使用100%的高度来覆盖整个屏幕 */
	}
	
	.shouyiText {
		display: flex;
		justify-content: left;
		align-items: center;
		padding-left: 20px;
		height: 30%;
		/* 使用100%的高度来覆盖整个屏幕 */
	}

	.shouyi {
		margin-top: 10px;
		height: 170px;
		background-color: #F1F8FF;
		border-radius: 20rpx;
	}

	.otherinfo {
		margin-top: 10px;
		height:107px;
		padding: 10px 20px 20px 20px;
		border: 0px solid red;
		border-radius: 20rpx;
		background-color: white;
		overflow: hidden;
		border: 0px solid red;
		line-height: 25px;
	}

	.footerinfo {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 0px solid red;
		margin-top: 10px;
		height:20px;
	}

</style>



